<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>
<ul id="app-2">
    <li v-for="(item, index) in items">
        {{parentMessage}} - {{index}} -{{item.message}}
    </li>
</ul>
<!--遍历对象的属性-->
<ul id="app-3" class="demo">
    <li v-for="value in object">
        {{value}}
    </li>
</ul>
<!--跟踪节点, 当数据发生变更时,只更新对应索引的数据-->
<div id="app-4" v-for="item in items" v-bind:key="item.id">
</div>
<div id="app-5">
    <li v-for="n in evenNumbers">{{n}}</li>
</div>
<div id="app-6">
    <li v-for="n in even(numbers)">{{n}}</li>
</div>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            numbers: [1, 2, 3, 4, 5]
        },
        methods: {
            even: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    });
    var app5 = new Vue({
        el: '#app-5',
        data: {
            numbers: [1, 2, 3, 4, 5]
        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    });
    // var app4 = new Vue({
    //     el: '#app-4',
    //     data: {
    //         items: function () {
    //             return new Array();
    //         }
    //     }
    // });
    var app3 = new Vue({
        el: '#app-3',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    });
    var app2 = new Vue({
        el: '#app-2',
        data: {
            parentMessage: 'Parent',
            items: [
                {message: 'Boo'},
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    });
    app.items.filter(function (item) {
        return item.message.match(/Foo/);
    });
</script>

</body>
</html>